<template>
  <div>
    <!--弹窗的按钮-->
    <el-button
      type="primary"
      :disabled="btnDisabled"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitle}}({{buttonMeta.hotkey}})
    </el-button>
    <!--弹窗，表单   v-dialogdrag="buttonMeta.dialogWidth"-->
    <div v-dialog-drag="dialogInfo">
      <el-dialog
        :title="buttonMeta.dialogTitle"
        v-model="dialogInfo.visible"
        :modal="true"
        :width="buttonMeta.dialogWidth"
        :close-on-click-modal="true"
        :destroy-on-close="false"
      >
        <el-scrollbar style="height:600px;margin: 2px;">
          <component
            :is="componentKind[buttonMeta.controlKey]"
            :moduleId="buttonMeta.openModuleId"
            :dataId="dataId"
            :formMetaId="buttonMeta.formMetaId"
            :actionId="buttonMeta.actionId"
            :type="buttonMeta.btnKind"
            :dialogInfo="dialogInfo"
          >
          </component>
        </el-scrollbar>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, reactive } from 'vue'
  import { ElButton, ElDialog, ElScrollbar , ElMessage } from 'element-plus'
  import { mykeydown } from '../map'
  import { _dialogDrag } from '../drag/dialogDrag'
  import type { PropType } from 'vue'

  import type {
    IButtonMeta // 按钮控件需要的 meta
  } from '../types/60-button'

  export default defineComponent({
    name: 'nf-el-button-dialog',
    directives: {
      dialogDrag: _dialogDrag
    },
    components: {
      ElButton, ElDialog, ElScrollbar
    },
    props: {
      moduleId: [Number, String],
      dataId: [Number, String],
      active: Object, // 按钮的meta集合
      buttonMeta: {
        type: Object as PropType<IButtonMeta>,
        default: () => { return {}}
      },
      componentKind: {
        type: Object,
        default: () => { return {} }
      }
    },
    setup(props, context) {
      // 弹窗信息
      const dialogInfo = reactive({
        visible: false
      })

      // 设置按钮是否可用
      const btnDisabled = ref(true)

      // 单击按钮，显示弹窗
      const buttonClick = () => {
        // 按钮信息
        if (props.buttonMeta.btnKind === 'add') {
          dialogInfo.visible = true // 是否显示弹窗
        } else if (!btnDisabled.value) {
          dialogInfo.visible = true
        } else {
          ElMessage({
            type: 'info',  
            message: '请先选择一条记录。'
          })
        }
      }

      // 按钮快捷键
      mykeydown(props.buttonMeta.hotkey, (e, isAlt) => {
        if (isAlt) {
          buttonClick()
        }
      })

      // 监听选择的变化，记入状态
      watch(() => props.dataId, (id) => {
        btnDisabled.value = (props.buttonMeta.btnKind === 'add') ? 
          false : id === ''
      },
      { immediate: true })

      return {
        dialogInfo,
        btnDisabled,
        buttonClick
         
      }
    }
  })

</script> 